import styled from 'styled-components'
import logoPic from '../../static/logo.png'

export const HeaderWrapper = styled.div`
    height:56px
    border-bottom:1px solid #f0f0f0
`


export const Logo = styled.div`
   position:absolute;
   top:0;
   left:0;
   display:block;
   width:100px;
   height:56px;
   background:url(${logoPic});
   background-size:cover
`

export const Nav = styled.div`
    width:960px;
    height:100%;
    padding-right:50px;
    box-sizing:border-box;
    margin:0 auto;
`

export const NavItem = styled.div`
    line-height:56px;
    padding:0 15px;
    font-size:17px;
    color:#333;
    &.left{
        float:left;
    }
    &.right{
        float:right
          color:#969696
    }
    &.active{
        
    }
`

export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width:150px;
    height:38px;
    padding:0 35px 0 20px;
    margin-top:9px;
    border:none;
    outline:none;
    box-sizing: border-box;
    border-radius:19px;
    background:#eee;
    font-size:14px
    color:#666
    &::placeholder{
        color:#999
    }
    &.focused{
         width:240px;
    }
    &.slide-enter{
        transition:all .2s ease-out
    }
    &.slide-enter-active{
        width:240px
        transition:all .2s ease-out
    }
    &.slide-exit{
        width:240px
        transition:all .2s ease-out
    }
    &.slide-exit-active{
        width:160px
        transition:all .2s ease-out
    }
`

export const SearchWrapper = styled.div`
    position:relative;
    float:left;
    .zoom{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        height:30px;
        border-radius:15px;
        line-height:30px;
        text-align:center;
        &.focused{
            background:#afaaaa;
            color:#fff
        }
    }
`

export const SearchInfo = styled.div`
    position:absolute;
    top:56px;
    left:0;
    z-index:6;
    padding:0 20px;
    width:240px;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    background:white;
    &:after{
        content:'';
        position: absolute;
        top:-18px;
        left:30px;
        height: 0px;
        width: 0px;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 10px solid white;
    }
`

export const SearchInfoTitle = styled.div`
    float: left;
    margin-bottom:15px;
    margin-top:20px;
    font-size:14px;
    color:#969696;
    overflow:hidden
`


export const SearchInfoUpdate = styled.a`
    float: right;
    margin-bottom:15px;
    margin-top:20px;
    font-size:13px;
    color:#2f2f2f;
    cursor: pointer;
`

export const SearchInfoWrapper = styled.div`
     overflow:hidden
     .spiner{
        display:block;
        float:left;
        font-size:12px;
        margin-right:2px
        color:#333;
        transition: all .2s ease-in;
        transform-origin:center center
     }
`

export const SearchItem = styled.a`
    display: inline-block;
    margin-bottom:10px;
    margin-right:15px;
    padding: 4px 6px;
    font-size: 12px;
    color: #787878;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    &:hover{
        color: #333;
    }
`



export const Addition = styled.div`
    position:absolute;
    right:0;
    top:0;
    height:50px
`

export const Button = styled.div`
       float:right;
       margin-top:12px;
       margin-right:20px;
       padding:0 20px;
       line-height:32px;
       border-radius:30px;
       border:1px solid #ea6f5a;
       font-size:14px;
       cursor:pointer;
       &.reg{
        color:#ea6f5a
        &:hover{
           background:#fef7f6 
        }
       }
       &.writting{
       background:#ea6f5a;
       color:#fff
       }
`